<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="app">
        <div v-bind:title="title">
            {{counter}}
        </div>
        <!-- 事件添加 -->
        <div>
            Message:{{Message}}
            <button v-on:click="reverseMessage">反转Message</button>
        </div>
    </div>
</body>
<script>
    var app = Vue.createApp({
        created(){
            // setInterval(()=>{
            //     this.counter++;
            //     this.title = new Date().toString();
            // },1000)
        },
        data:function(){
            return {
                counter:1,
                title:new Date().toString(),
                Message:"123456789ABCDEFG"
            }
        },
        methods:{
            reverseMessage(){
                this.Message = this.Message.split("").reverse().join("");
            }
        }
    });
    var vm = app.mount("#app");
    let count = [[65,90],[97,122],[33,57]];
    
    let keys1 = [],keys2 = []; 
    count.forEach(item=>{
        for(let i = item[0]; i <= item[1]; i++){
            if(i==34 || i == 39) continue;
            keys1.push(String.fromCharCode(i));
            keys2.push(String.fromCharCode(i));
        }
    });
    let resolveIn = {},resolveOut={};
    for(let i = 0; i < keys1.length;i++){
        let num = Math.floor(Math.random() * keys2.length);
        resolveIn[keys1[i]] = keys2[num];
        keys2.splice(num,1);
    }
    Object.getOwnPropertyNames(resolveIn).forEach(key=>{
        resolveOut[resolveIn[key]] = key;
    });
</script>
</html>